<template>
  <div class="Envir">
	<el-row :gutter="10" class="Envir_row">
	    <el-col :span="6" class="Envir_col">
	        <div class="Envir_col_item Envir_col_item1">
				<div class="Envir_title">今日传感数据</div>
				<div class="line_chart">
					<LineChart
  					ref="Chart1"
  					:title="title1"
  					:titleFontSize="12"
  					:seriesDatas="seriesDatas1"
  					:gridTop="30"
  					:gridBottom="0"
  					:gridLeft="0"
  					:gridRight="10"
  					:xAxisType="'time'"
  					:xInterval="1000 * 60 * 60 * 3"
  					:xAxisMin="new Date(new Date().getFullYear(), 9, 15, 0, 0, 0)"
  					:xAxisMax="new Date(new Date().getFullYear(), 9, 15, 23, 0, 0)"></LineChart>
				</div>
				<div class="line_chart">
					<LineChart
  					ref="Chart2"
  					:title="title2"
  					:titleFontSize="12"
  					:seriesDatas="seriesDatas2"
  					:gridTop="30"
  					:gridBottom="0"
  					:gridLeft="0"
  					:gridRight="10"
  					:xAxisType="'time'"
  					:xInterval="1000 * 60 * 60 * 3"
  					:xAxisMin="new Date(new Date().getFullYear(), 9, 15, 0, 0, 0)"
  					:xAxisMax="new Date(new Date().getFullYear(), 9, 15, 23, 0, 0)"></LineChart>
				</div>
				<div class="line_chart">
					<LineChart
  					ref="Chart3"
  					:title="title3"
  					:titleFontSize="12"
  					:seriesDatas="seriesDatas3"
  					:gridTop="30"
  					:gridBottom="0"
  					:gridLeft="0"
  					:gridRight="10"
  					:xAxisType="'time'"
  					:xInterval="1000 * 60 * 60 * 3"
  					:xAxisMin="new Date(new Date().getFullYear(), 9, 15, 0, 0, 0)"
  					:xAxisMax="new Date(new Date().getFullYear(), 9, 15, 23, 0, 0)"></LineChart>
				</div>
	        </div>
	    </el-col>
	    <el-col :span="12" class="Envir_col">
	        <div class="Envir_col_item Envir_col_item2">
				<div class="Envir_title">实时数据</div>
				<div class="machine_msg">
					<el-table :data="tableData" style="width: 100%" :max-height="560" :header-cell-style="{background:'#F3F4F7'}">
					    <el-table-column type="index" label="序号" align="center"></el-table-column>
					    <el-table-column prop="key1" label="设备编号" align="center"></el-table-column>
					    <el-table-column prop="key2" label="名称" align="center"></el-table-column>
					    <el-table-column prop="key3" label="状态" align="center"></el-table-column>
					    <el-table-column prop="key4" label="温度" align="center"></el-table-column>
					    <el-table-column prop="key4" label="湿度" align="center"></el-table-column>
					    <el-table-column label="操作" align="center">
					    	<el-button @click="$router.push('/envirdetail')">查看</el-button>
					    </el-table-column>
					</el-table>
				</div>
	        </div>
	    </el-col>
	    <el-col :span="6" class="Envir_col">
	        <div class="Envir_col_item Envir_col_item3">
				<div class="Envir_title">天气预报<span class="freshTime">15:00 更新</span></div>
				<div class="weather">
					<div class="tem">
						<span>28&#8451; </span>
						<span> 晴</span>
						<span><i class="weather_icon el-icon-location"></i> 鹰潭</span>
					</div>
					<div class="desc">
						<span><i class="weather_icon el-icon-wind-power"></i> 西南风一级</span>
						<span><i class="weather_icon el-icon-heavy-rain"></i> 湿度30%</span>
						<span><i class="weather_icon el-icon-odometer"></i> 气压1025hPa</span>
						<span><i class="weather_icon el-icon-sunny"></i> 优</span>
					</div>
					<div class="tag">
						<el-tag type="success">五天预报</el-tag>
						<el-tag type="success">分时预报</el-tag>
						<el-tag type="success">空气质量</el-tag>
					</div>
					<div class="pre">
						<div class="weather_pre">
							<div class="weather_pre_date">03-28</div>
							<div class="weather_pre_img"><img src="../../assets/imgs/weather/晴.gif" alt=""></div>
							<div class="weather_pre_desc">晴</div>
						</div>
						<el-divider direction="vertical"></el-divider>
						<div class="weather_pre">
							<div class="weather_pre_date">03-28</div>
							<div class="weather_pre_img"><img src="../../assets/imgs/weather/晴.gif" alt=""></div>
							<div class="weather_pre_desc">晴</div>
						</div>
						<el-divider direction="vertical"></el-divider>
						<div class="weather_pre">
							<div class="weather_pre_date">03-28</div>
							<div class="weather_pre_img"><img src="../../assets/imgs/weather/晴.gif" alt=""></div>
							<div class="weather_pre_desc">晴</div>
						</div>
						<el-divider direction="vertical"></el-divider>
						<div class="weather_pre">
							<div class="weather_pre_date">03-28</div>
							<div class="weather_pre_img"><img src="../../assets/imgs/weather/晴.gif" alt=""></div>
							<div class="weather_pre_desc">晴</div>
						</div>
						<el-divider direction="vertical"></el-divider>
						<div class="weather_pre">
							<div class="weather_pre_date">03-28</div>
							<div class="weather_pre_img"><img src="../../assets/imgs/weather/晴.gif" alt=""></div>
							<div class="weather_pre_desc">晴</div>
						</div>
					</div>
				</div>
				<div class="weather">
					<radarChart
					ref="Chart4"
					:title="title4"
					:titleColor="'#909399'"
					:titleFontSize="15"
					:seriesName="seriesName4"
					:indicatorData="indicatorData4"
					:seriesValue="seriesValue4"
					:textColor="'#777'"
					:textBgColor="'#e1f3d8'"
					:textPadding="[5,10,5,10]"
					:seriesLineColor="'rgba(0,228,255,.5)'"
					:symbolColor="'rgba(0,228,255)'"
					:areaColor="'rgba(0,228,255,.5)'"
					/>
				</div>
	        </div>
	    </el-col>
        <el-col :span="18" class="Envir_col">
	        <div class="Envir_col_item Envir_col_item4">
				<div class="Envir_title">环境监测</div>
				<div class="radar_chart">
					<div class="chart">
						<el-progress type="circle" :percentage="25" :width="100" color="#e34766"></el-progress>
					</div>
					<div class="text">
						<p>温度</p>
						<p>&#8451;</p>
					</div>
				</div>
				<div class="radar_chart">
					<div class="chart">
						<el-progress type="circle" :percentage="60" :width="100" color="#e5c148"></el-progress>
					</div>
					<div class="text">
						<p>湿度</p>
						<p>RH%</p>
					</div>
				</div>
				<div class="radar_chart">
					<div class="chart">
						<el-progress type="circle" :percentage="70" :width="100" color="#2be0f8"></el-progress>
					</div>
					<div class="text">
						<p>大气压</p>
						<p>hPa</p>
					</div>
				</div>
				<div class="radar_chart">
					<div class="chart">
						<el-progress type="circle" :percentage="15" :width="100" color="#50fdb5"></el-progress>
					</div>
					<div class="text">
						<p>PM2.5</p>
						<p>μg/m3</p>
					</div>
				</div>
				<div class="radar_chart">
					<div class="chart">
						<el-progress type="circle" :percentage="35" :width="100" color="#fb7b42"></el-progress>
					</div>
					<div class="text">
						<p>风速</p>
						<p>m/s</p>
					</div>
				</div>
				<div class="radar_chart">
					<div class="chart">
						<el-progress type="circle" :percentage="33" :width="100" color="#6848f1"></el-progress>
					</div>
					<div class="text">
						<p>风向</p>
						<p>°</p>
					</div>
				</div>
				<div class="radar_chart">
					<div class="chart">
						<el-progress type="circle" :percentage="55" :width="100" color="#30df50"></el-progress>
					</div>
					<div class="text">
						<p>噪声</p>
						<p>dB</p>
					</div>
				</div>
	        </div>
	    </el-col>
	    <el-col :span="6" class="Envir_col">
	        <div class="Envir_col_item Envir_col_item5">
				<div class="Envir_title">预警信息</div>
				<ul class="Envir_msg">
					<li>6号传感器1号设备待接入！</li>
					<li>6号传感器1号设备待接入！</li>
					<li>6号传感器1号设备待接入！</li>
					<li>6号传感器1号设备待接入！</li>
					<li>6号传感器1号设备待接入！</li>
					<li>6号传感器1号设备待接入！</li>
					<li>6号传感器1号设备待接入！</li>
					<li>6号传感器1号设备待接入！</li>
					<li>6号传感器1号设备待接入！</li>
					<li>6号传感器1号设备待接入！</li>
					<li>6号传感器1号设备待接入！</li>
					<li>6号传感器1号设备待接入！</li>
				</ul>
	        </div>
	    </el-col>
	</el-row>
  </div>
</template>
<script>
	// import gaugeChart from '../../components/base-ChartGauge.vue'
	import LineChart from '../../components/base-ChartLine.vue'
	import radarChart from '../../components/base-ChartRadar.vue'

	export default {
	  components: {
	  	// gaugeChart,
	  	LineChart,
	  	radarChart,
	  },
	  data() {
	  	return {
	  		//温度
	  		title1: '温度（°C）',
			seriesDatas1: [{
				name: '温度',
				value: [
					['2019/10/15 0:00:00',15],['2019/10/15 1:00:00',15.3],['2019/10/15 2:00:00',15.5],['2019/10/15 3:00:00',15.5],['2019/10/15 4:00:00',15.8],['2019/10/15 5:00:00',23],['2019/10/15 6:00:00',23.5],['2019/10/15 7:00:00',23.8],['2019/10/15 8:00:00',28],['2019/10/15 9:00:00',28.5],['2019/10/15 10:00:00',28.8],['2019/10/15 11:00:00',35.5],['2019/10/15 12:00:00',35.8],['2019/10/15 13:00:00',35.5],['2019/10/15 14:00:00',35],['2019/10/15 15:00:00',28.8],['2019/10/15 16:00:00',28.5],['2019/10/15 17:00:00',28],['2019/10/15 18:00:00',23.8],['2019/10/15 19:00:00',23.5],['2019/10/15 20:00:00',23],['2019/10/15 21:00:00',15.8],['2019/10/15 22:00:00',15.5],['2019/10/15 23:00:00',15]],
				type: 'line',
				color: 'rgba(239, 87, 119,1.0)',
			}],
			//湿度
			title2: '湿度（RH%）',
			seriesDatas2: [{
				name: '湿度',
				value: [
					['2019/10/15 0:00:00',15],['2019/10/15 1:00:00',15.3],['2019/10/15 2:00:00',15.5],['2019/10/15 3:00:00',15.5],['2019/10/15 4:00:00',15.8],['2019/10/15 5:00:00',23],['2019/10/15 6:00:00',23.5],['2019/10/15 7:00:00',23.8],['2019/10/15 8:00:00',28],['2019/10/15 9:00:00',28.5],['2019/10/15 10:00:00',28.8],['2019/10/15 11:00:00',35.5],['2019/10/15 12:00:00',35.8],['2019/10/15 13:00:00',35.5],['2019/10/15 14:00:00',35],['2019/10/15 15:00:00',28.8],['2019/10/15 16:00:00',28.5],['2019/10/15 17:00:00',28],['2019/10/15 18:00:00',23.8],['2019/10/15 19:00:00',23.5],['2019/10/15 20:00:00',23],['2019/10/15 21:00:00',15.8],['2019/10/15 22:00:00',15.5],['2019/10/15 23:00:00',15]],
				type: 'line',
				color: 'rgba(255, 221, 89,1.0)',
			}],
			//噪声
			title3: '噪声（Lux）',
			seriesDatas3: [{
				name: '噪声',
				value: [
					['2019/10/15 0:00:00',15],['2019/10/15 1:00:00',15.3],['2019/10/15 2:00:00',15.5],['2019/10/15 3:00:00',15.5],['2019/10/15 4:00:00',15.8],['2019/10/15 5:00:00',23],['2019/10/15 6:00:00',23.5],['2019/10/15 7:00:00',23.8],['2019/10/15 8:00:00',28],['2019/10/15 9:00:00',28.5],['2019/10/15 10:00:00',28.8],['2019/10/15 11:00:00',35.5],['2019/10/15 12:00:00',35.8],['2019/10/15 13:00:00',35.5],['2019/10/15 14:00:00',35],['2019/10/15 15:00:00',28.8],['2019/10/15 16:00:00',28.5],['2019/10/15 17:00:00',28],['2019/10/15 18:00:00',23.8],['2019/10/15 19:00:00',23.5],['2019/10/15 20:00:00',23],['2019/10/15 21:00:00',15.8],['2019/10/15 22:00:00',15.5],['2019/10/15 23:00:00',15]],
				type: 'line',
				color: 'rgba(75, 207, 250,1.0)',
			}],

			tableData: Array(20).fill({key1: 'aaa',key2: 'bbb',key3: 'ccc',key4: 'ddd'}),

			//七日环境
			title4: '七日环境',
			seriesName4: '雷达图',
			indicatorData4: [
				{name: '温度', max: 100},
				{name: '湿度', max: 100},
				{name: '大气压', max: 100},
				{name: 'PM2.5', max: 100},
				{name: '风速', max: 100},
				{name: '风向', max: 100}
			],
			seriesValue4: [[40,50,60,70,80,90]],

			//温度
			seriesData5: [{value: 46,name: '温度'}],
			axisLineColor5: [[0.2, '#4CCBD7'],[0.4, '#272864'],[0.6, '#7C4633'],[0.8, '#FF7A00'],[1, '#FF0000']],
			//湿度
			seriesData6: [{value: 46,name: '湿度'}],
			axisLineColor6: [[0.2, '#4CCBD7'],[0.4, '#272864'],[0.6, '#7C4633'],[0.8, '#FF7A00'],[1, '#FF0000']],
			//大气压
			seriesData7: [{value: 46,name: '大气压'}],
			axisLineColor7: [[0.2, '#4CCBD7'],[0.4, '#272864'],[0.6, '#7C4633'],[0.8, '#FF7A00'],[1, '#FF0000']],
			//PM2.5
			seriesData8: [{value: 46,name: 'PM2.5'}],
			axisLineColor8: [[0.2, '#4CCBD7'],[0.4, '#272864'],[0.6, '#7C4633'],[0.8, '#FF7A00'],[1, '#FF0000']],
			//风速
			seriesData9: [{value: 46,name: '风速'}],
			axisLineColor9: [[0.2, '#4CCBD7'],[0.4, '#272864'],[0.6, '#7C4633'],[0.8, '#FF7A00'],[1, '#FF0000']],
			//风向
			seriesData10: [{value: 46,name: '风向'}],
			axisLineColor10: [[0.2, '#4CCBD7'],[0.4, '#272864'],[0.6, '#7C4633'],[0.8, '#FF7A00'],[1, '#FF0000']],
			//噪声
			seriesData11: [{value: 46,name: '噪声'}],
			axisLineColor11: [[0.2, '#4CCBD7'],[0.4, '#272864'],[0.6, '#7C4633'],[0.8, '#FF7A00'],[1, '#FF0000']],
	  	}
	  },
	  mounted() {
	  	window.addEventListener('resize', this.resize)
	  },
	  beforeDestroy() {
	  	window.removeEventListener('resize', this.resize)
	  },
	  methods: {
	  	resize() {
	  		this.$refs.Chart1.refreshChart()
	  		this.$refs.Chart2.refreshChart()
	  		this.$refs.Chart3.refreshChart()
	  		this.$refs.Chart4.refreshChart()
	  		// this.$refs.Chart5.refreshChart()
	  		// this.$refs.Chart6.refreshChart()
	  		// this.$refs.Chart7.refreshChart()
	  		// this.$refs.Chart8.refreshChart()
	  		// this.$refs.Chart9.refreshChart()
	  		// this.$refs.Chart10.refreshChart()
	  		// this.$refs.Chart11.refreshChart()
	  	}
	  }
	}
</script>
<style>
	.Envir {
		padding: 20px;
		background-color: #E9EEF3;
	}
	.Envir_row {
		margin-top: -10px;
	}
	.Envir_col {
		padding-top: 10px;
	}
	.Envir_col_item {
		box-sizing: border-box;
		padding: 10px;
		background-color: #fff;
		border-radius: 3px;
	}
	.Envir_title {
		font-size: 14px;
		font-weight: 800;
		color: #909399;
		height: 20px;
		line-height: 20px;
	}
	.Envir_col_item1,
	.Envir_col_item2,
	.Envir_col_item3 {
		height: 600px;
	}
	.Envir_col_item4,
	.Envir_col_item5 {
		height: 200px;
	}
	.Envir_col_item1 .line_chart {
		height: calc((100% - 20px) / 3);
	}
	.Envir_col_item2 .machine_msg {
		height: calc(100% - 20px);
	}
	.Envir_col_item2 .machine_msg .el-table th {
		padding: 5px 0;
	}
	.Envir_col_item2 .machine_msg .el-table td {
		padding: 5px 0;
	}
	.Envir_col_item2 .machine_msg .el-table td .el-button {
		padding: 5px 10px;
		font-size: 13px;
	}
	.Envir_col_item3 .weather {
		height: calc((100% - 20px) / 2);
	}
	.Envir_col_item3 .weather .weather_icon {
		color: #00e4ff
	}
	.Envir_col_item3 .freshTime {
		float: right;
		height: 20px;
		line-height: 20px;
		color: #909399;
		font-weight: 500;
	}
	.Envir_col_item3 > .weather > .tem {
		height: 50px;
		margin-bottom: 15px;
	}
	.Envir_col_item3 > .weather > .tem span {
		display: inline-block;
		color: #909399;
	}
	.Envir_col_item3 > .weather > .tem span:nth-child(1) {
		font-size: 45px;
		color: #00e4ff;
	}
	.Envir_col_item3 > .weather > .tem span:nth-child(2) {
		font-size: 15px;
	}
	.Envir_col_item3 > .weather > .tem span:nth-child(3) {
		float: right;
		height: 50px;
		line-height: 50px;
		font-size: 15px;
	}
	.Envir_col_item3 > .weather > .desc {
		margin-bottom: 20px;
	}
	.Envir_col_item3 > .weather > .desc span {
		display: inline-block;
		font-size: 13px;
		margin-right: 10px;
	}
	.Envir_col_item3 > .weather > .tag {
		margin-bottom: 20px;
	}
	.Envir_col_item3 > .weather > .tag span {
		display: inline-block;
		margin-right: 10px;
	}
	.Envir_col_item3 > .weather > .pre {
		margin-bottom: 20px;
		width: 100%;
		height: 80px;
	}
	.Envir_col_item3 > .weather > .pre > .weather_pre {
		display: inline-block;
		width: calc(100% / 5 - 1px);
		height: 100%;
		text-align: center;
		vertical-align: middle;
	}
	.Envir_col_item3 > .weather > .pre > .el-divider {
		height: 80%;
		margin: 0;
	}
	.Envir_col_item3 > .weather > .pre > .weather_pre > .weather_pre_date {
		font-size: 10px;
	}
	.Envir_col_item3 > .weather > .pre > .weather_pre > .weather_pre_desc {
		font-size: 10px;
	}
	.Envir_col_item3 > .weather > .pre > .weather_pre > .weather_pre_img {
		width: 100%;
	}
	.Envir_col_item3 > .weather > .pre > .weather_pre > .weather_pre_img > img {
		width: 90%;
	}
	.Envir_col_item4 .radar_chart {
		float:left;
		width: calc(100% / 7);
		height: calc(100% - 20px);
		text-align: center;
	}
	.Envir_col_item4 .radar_chart .chart:after {
		content: '';
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}
	.Envir_col_item4 .radar_chart .chart {
		height: 75%;
	}
	.Envir_col_item4 .radar_chart .chart .el-progress {
		vertical-align: middle;
	}
	.Envir_col_item4 .radar_chart .text {
		height: 25%;
	}
	.Envir_col_item4 .radar_chart .text p {
		margin: 0;
		height: 50%;
		text-align: center;
	}
	.Envir_col_item5 ul {
		margin: 0;
		padding-left: 20px;
		height: calc(100% - 20px);
		overflow: auto;
	}
	.Envir_col_item5 ul li {
		font-size: 14px;
		line-height: 23px;
		color: #909399;
	}
	
</style>